<template>
    <div>
        <div class="head">
            <div class="left">
                <div class="logo">
                    <img src="@/assets/ikun.jpg">
                </div>
                <h2>急了么</h2>
            </div>

            <div @click="showPosition">
                <img class="position-image" src="@/assets/index/position.png">
            </div>
        </div>

        <div>
               <Map ref="map"></Map>
        </div>
        <search></search>

        <!-- <banner></banner> -->
        
        <category></category>

        <Coupon></Coupon>
        <index-store></index-store>
    </div>
</template>

<script>
import Map from '@/components/map/Map.vue'

import Category from '@/components/category/Category.vue'
import Search from '@/components/search/Search.vue'
import Banner from '@/components/banner/Banner.vue'

import Coupon from '@/components/coupon/Coupon.vue'

import IndexStore from '@/components/store/IndexStore'
export default {
    components: {
        Category,
        Search,
        Banner,
        IndexStore,
        Map,
        Coupon,
    },
    data(){
        return{
        }
    },
    methods:{
        showPosition(){
            this.$refs.map.show = true
        }
    }

}
</script>

<style scoped>
.logo img {
    height: 50px;
    width: 50px;

    border-radius: 50%;

    margin-right: 10px;
}

.head {
    display: flex;

    justify-content: space-between;
    align-items: center;

    color: white;
    text-align: left;
    padding: 10px;
    background-color: #1989fa;

    margin-bottom: 10px;
}

.head > .left{
    display: flex;
    align-items: center;
}

.position-image{
    width: 25px;
}


</style>